<template>
    <div class="panel-body panel-home">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
        </div>
        <div class="panel-main" style="padding-top: 0">
            <el-form  :model="form" ref="ruleForm" label-width="100px" class="access-form">
                <el-input type="hidden" v-model="form.id"></el-input>
                <div v-for="(auth,index) in authen" style="margin-bottom: 15px">
                    <div style="font-size: 14px;font-weight: 700;padding-bottom: 5px;"> <i class="fa fa-hand-o-right"></i> {{ auth.name }}</div>
                    <el-form-item v-for="(item,index) in auth.child":key="index" style="margin-left: -80px">
                        <span @click="check(item.child)" style="float: left;margin-right: 15px;cursor: pointer">{{ item.name }}</span>
                        <el-checkbox-group v-model="form.access_ids" >
                            <el-checkbox style="margin-right: 15px;" v-for="(child,i) in item.child" :label="child.code" :key="i">{{child.name}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-button type="primary"  @click="update()"  size="medium">保 存</el-button>
                    <el-button size="medium" @click="back()">返 回</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<!---->
<script>
    import {mapGetters} from 'vuex';
    import {RoleAccess} from '@/utils/request';
    export default {
        computed: {
            ...mapGetters(['meta_name','loading','authen','rules']),
        },
        data() {
            return {
                form: {
                    id: 0,
                    access_ids: [],
                },
            }
        },
        activated() {
            this.form.id = this.$route.query.id;
            this.form.access_ids = this.rules;
            this.$store.dispatch('setActive', '/role');
        },
        methods: {
            back() {
                this.$router.go(-1);
            },
            check(obj){
                obj.filter(a=>{
                    if(!this.form.access_ids.includes(a.code)){
                        this.form.access_ids.push(a.code);
                    }
                })
            },
            update(){
                RoleAccess(this.form).then((res)=>{
                    if(res.code){
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    }else{
                        this.$notify({
                            type: 'success',
                            duration:1000,
                            title: 'SUCCESS',
                            message: res.msg, onClose:()=>{
                                this.back();
                            }});
                    }
                });
            }
        }
    }
</script>
<style>
    .access-form .el-checkbox__label{
        padding-left: 5px;
    }
    .access-form .el-form-item {
        margin-bottom: 0;
    }
</style>
